<template>
  <div class="login">
    <div class="login_box">
      <el-card>
        <div class="avatar_box">
          <img src="@/assets/logo.png" alt="" />
        </div>
        <el-form
          :rules="loginRules"
          :model="user"
          ref="loginForm"
          label-width="120px"
          class="login_form"
        >
          <el-form-item label="用户类型" prop="type">
            <el-radio-group v-model="user.type">
              <el-radio label="面试官">面试官</el-radio>
              <el-radio label="应聘者">应聘者</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="用户名或邮箱" prop="username">
            <el-input
              v-model="user.username"
              prefix-icon="el-icon-user"
              placeholder="请输入用户名或邮箱"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="user.password"
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
            ></el-input>
          </el-form-item>

          <p v-show="user.errorTip" style="color: red">用户类型或密码错误</p>
          <el-row class="btns">
            <el-button type="primary" @click="onLogin">登录</el-button>
            <el-button type="primary" @click="onSignIn">注册</el-button>
          </el-row>
        </el-form>
      </el-card>
    </div>

    <el-dialog
      title="账号注册"
      :visible.sync="dialogSignInVisible"
      :before-close="beforeDialogSignInClose"
      append-to-body
    >
      <el-form
        :rules="signInRules"
        :model="user"
        ref="signInForm"
        label-width="120px"
      >
        <el-form-item label="用户类型" prop="type">
          <el-radio-group v-model="user.type">
            <el-radio label="面试官">面试官</el-radio>
            <el-radio label="应聘者">应聘者</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="用户名或邮箱" prop="username">
          <el-input
            v-model="user.username"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名或邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="输入密码" prop="password">
          <el-input
            type="password"
            v-model="user.password"
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password2">
          <el-input
            type="password"
            v-model="user.password2"
            prefix-icon="el-icon-lock"
            placeholder="请确认密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onSignInCancel">取消</el-button>
        <el-button type="primary" @click="onSignInConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      dialogSignInVisible: false,
      // 登录表单数据绑定对象
      user: {
        username: "test1@mail.com",
        password: "123456",
        password2: "123456",
        errorTip: false,
        type: "应聘者",
      },
      loginRules: {
        type: [{ required: true, message: "请输入用户类型", trigger: "blur" }],
        //   用户名验证
        username: [
          { required: true, message: "请输入用户名或邮箱", trigger: "blur" },
          { min: 3, message: "长度在 3 个字符以上", trigger: "blur" },
        ],
        //   密码验证
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度在 6 个字符以上", trigger: "blur" },
        ],
      },
      signInRules: {
        type: [{ required: true, message: "请输入用户类型", trigger: "blur" }],
        //   用户名验证
        username: [
          { required: true, message: "请输入用户名或邮箱", trigger: "blur" },
          { min: 3, message: "长度在 3 个字符以上", trigger: "blur" },
        ],
        //   密码验证
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 6, message: "长度在 6 个字符以上", trigger: "blur" },
        ],
        password2: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { min: 6, message: "长度在 6 个字符以上", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    setUserTest() {
      this.user = {
        //默认测试用户
        username: "test1@mail.com",
        password: "123456",
        password2: "123456",
        errorTip: false,
        type: "应聘者",
      };
    },
    setUserDefault() {
      this.user = {
        username: "",
        password: "",
        password2: "",
        type: "应聘者",
      };
    },
    onLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          axios
            .post("/api/reqLogin", {
              username: this.user.username,
              password: this.user.password,
              type:
                this.user.type == "应聘者"
                  ? 0
                  : this.user.type == "面试官"
                  ? 1
                  : -1,
            })
            .then((response) => {
              console.log(response);
              if (response.data.status == "1") {
                // to do
                // 1.将登录成功后的username(token)保存到客户端 sessionStorage
                //  1.1 项目的其他api接口只有拥有token才能访问
                //  1.2 sessionStorage而不是localStorage哦
                //  1.3 token加密需要后端实现，比较复杂，这里暂时用username代替hhh
                window.sessionStorage.setItem(
                  "username",
                  response.data.result.username
                );
                window.sessionStorage.setItem(
                  "usertype",
                  response.data.result.type
                );
                window.sessionStorage.setItem(
                  "userid",
                  response.data.result.userid
                );
                // 2. push to Home
                this.$router.push("/problem");
                this.$message.success("登录成功");
              } else {
                this.$message.error("登录失败，用户类型或密码错误");
              }
            })
            .catch((error) => {
              console.log(error);
              this.$message.error("登录失败");
            });
        } else {
          this.$message.error("用户名或密码输入有误");
        }
      });
    },
    onSignIn() {
      this.setUserDefault();
      this.dialogSignInVisible = true;
    },
    beforeDialogSignInClose(done) {
      this.dialogSignInVisible = false;
      this.setUserTest();
      done();
    },
    onSignInCancel() {
      this.dialogSignInVisible = false;
      this.setUserTest();
    },
    onSignInConfirm() {
      if (this.user.password === this.user.password2) {
        this.$refs.signInForm.validate((valid) => {
          if (valid) {
            axios
              .post("/api/reqSignIn", {
                username: this.user.username,
                password: this.user.password,
                type:
                  this.user.type == "应聘者"
                    ? 0
                    : this.user.type == "面试官"
                    ? 1
                    : -1,
              })
              .then((response) => {
                console.log(response);
                if (response.data.status == "1") {
                  this.$message.success("注册成功");
                  this.dialogSignInVisible = false;
                } else {
                  this.$message.error("注册失败，用户名已存在");
                }
              })
              .catch((error) => {
                console.log(error);
                this.setUserTest();
                this.$message.error("注册失败");
              });
          } else {
            this.$message.error("用户名或密码输入有误");
          }
        });
      } else {
        this.$message.error("两次输入密码不一致");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login_form {
  width: 100%;
  margin-top: 80px;
  padding: 0 20px;
  box-sizing: border-box;
}

.btns {
  display: flex;
  justify-content: flex-end;
}

/* 盒子居中 */
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  .avatar_box {
    height: 130px;
    width: 130px;
    border: 1px solid #eee;
    border-radius: 50%;
    overflow: hidden;
    padding: 10px;
    box-shadow: 0 0 5px #ddd;
    position: absolute;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
    img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
      background-color: #eee;
    }
  }
}
</style>
